<template>
  <div class="SingerHotsong">
    <!-- 歌手信息banner -->
    <div class="Singer-pic">
      <img :src="pic" alt="" />
      <div class="singer-info">
        <div class="singer-name">{{ singer_info.name }}</div>
        <div class="singer-fans">{{ singer_info.fans | formatNumber }}粉丝</div>
      </div>
    </div>
    <!-- 歌手歌曲列表 -->
    <div class="songList">
      <van-tabs v-model="active" color="black">
        <!-- 歌曲 -->
        <van-tab title="歌曲">
          <div
            class="song-item"
            v-for="(item, index) in songlist"
            :key="item.id"
          >
            <div
              :class="{
                'song-name': true,
                titleColor: isActive === index ? 'titleColor' : '',
              }"
              @click="
                goDetail('/home/classifyinfo1', item.mid),
                  ($store.state.song = item.title + '-' + item.singer[0].name),
                  ($store.state.icon = false)
              "
            >
              {{ item.title }}
            </div>
            <div class="song-author">
              {{ singer_info.name }} · {{ item.album.name }}
            </div>
          </div>
        </van-tab>
        <!-- 专辑 -->
        <van-tab title="专辑">内容 2</van-tab>
        <van-tab title="视频">内容 3</van-tab>
        <van-tab title="关于TA">内容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    id: null,
    pic: null,
    // 歌手信息
    singer_info: '',
    // 歌曲列表
    songlist: '',
    // 默认一次请求10首歌曲
    limit: 10,
    // 默认第一页
    page: 1,
    active: 0,
    isActive: null
  }),
  created() {
    // 通过路由传参获取歌手id
    this.id = this.$route.query.id
    // 通过路由传参获取歌手图片地址
    this.pic = this.$route.query.pic
    this.getSingerHotsong()
  },
  methods: {
    // 通过id获取歌手更多详情(歌曲,专辑,视频)
    async getSingerHotsong() {
      const res = await this.$http.getSingerHotsong({
        id: this.id,
        limit: this.limit,
        page: this.page
      })
      console.log(res.data.data)
      const data = res.data.data
      this.singer_info = data.singer
      this.songlist = data.list
    }
  }
}
</script>
<style lang="less" scoped>
.SingerHotsong {
  .Singer-pic {
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 0px 0px 50px 50px;
    position: relative;
    img {
      width: 100%;
      position: absolute;
      top: -25px;
    }
    .singer-info {
      position: absolute;
      left: 30px;
      bottom: 30px;
      .singer-name {
        color: #ffffff;
        font-size: 20px;
        font-weight: bold;
      }
      .singer-fans {
        margin-top: 10px;
        color: #ffffff;
      }
    }
  }
  .songList {
    .van-tab__pane {
      padding: 20px;
      .song-item {
        margin-bottom: 10px;
        .song-author {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}
</style>
